<template>
  <div class="box-main">
    <treeMenu
      class="tree-demo"
      :style="`width:${flag==true ?'200px':'50px'}`"
      @isOut="isOutClick"
      @treeClick="treeClick"
    ></treeMenu>
    <div :class="`${flag==true ?'content-demo':'content-demo-min'}`">
      <div v-if="showId==''"></div>
      <BugRemarkCheck v-else-if="showId=='bugCheck'"></BugRemarkCheck>
      <BugDescribeCheck v-else-if="showId=='bugDescribeCheck'"></BugDescribeCheck>
    </div>
  </div>
</template>
<script>
import treeMenu from "./treeMenu";
import BugRemarkCheck from "./BugRemarkCheck";
import BugDescribeCheck from "./BugDescribeCheck";
export default {
  components: {
    treeMenu,
    BugRemarkCheck,
    BugDescribeCheck,
  },
  data() {
    return {
      flag: true,
      showId: "",
    };
  },
  methods: {
    isOutClick(flag) {
      this.flag = flag;
    },
    treeClick(chick) {
      this.showId = "";
      if (chick.id !== "1") {
        this.showId = chick.id;
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.box-main {
  display: flex;
}
.tree-demo {
  overflow: hidden;
  transition: all 0.2s;
}
.content-demo {
  width: calc(100% - 200px);
  transition: all 0.2s;
}
.content-demo-min {
  width: calc(100% - 50px);
  transition: all 0.2s;
}
</style>